<template>
  <a-modal
    title="编辑"
    width="800px"
    v-model="visible"
    @ok="submit"
    :afterClose="closeModal"
    :destroyOnClose="true"
    :confirmLoading="btnLoading"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="选择仓库" prop="front_agent_admin_id">
        <div class="flex">
          <a-select
            v-model="form.front_agent_admin_id"
            allowClear
            :filter-option="filterOption"
            show-search
            @change="handleSearch"
          >
            <a-select-option v-for="item of list" :value="item.id" :key="item.id">{{ item.name }} </a-select-option>
          </a-select>
          <!-- <a-button type="primary" @click="handle('open', 'depot')">选择</a-button> -->
        </div>
      </a-form-model-item>
    </a-form-model>

    <!-- <depotListPop ref="depot" @select="(e) => select('front_agent_admin_id', e)"></depotListPop> -->
  </a-modal>
</template>

<script>
// import depotListPop from './depotListPop.vue'
import { bind, list } from '@/api/warehouse.js'
export default {
  components: {
    // depotListPop,
  },

  props: {
    params: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      visible: false,
      btnLoading: false,
      form: {
        front_agent_admin_id: '',
        store_id: '',
      },
      rules: {
        front_agent_admin_id: [{ required: true, message: '请选择', trigger: 'change' }],
        store_id: [{ required: true, message: '请选择', trigger: 'change' }],
      },
      list: [],
    }
  },

  async created() {
    let res = await list({
      pageSize: 10000,
      pageNo: 1,
    })

    if (res.code == 0) {
      this.list = res.data.list || []
    }
  },

  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    handleSearch(value) {
      if (!value) return
      let [item] = this.list.filter((d, index) => {
        return d.id == value
      })
      this.form.front_agent_admin_id = item.id
    },

    open(form) {
      if (form) {
        this.form = form
      }

      this.visible = true
    },

    submit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))

          this.btnLoading = true
          let res = await bind({ ...form, type: this.params.type })
          if (res.code == 0) {
            this.$message.success('操作成功')
            this.visible = false
            this.$emit('callback')
          } else {
            this.$message.error(res.msg)
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },

    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },

    handle(type, item) {
      switch (type) {
        case 'open':
          this.$refs[item].visible = true
          break
      }
    },

    select(el, e) {
      switch (el) {
        case 'front_agent_admin_id':
          this.form.front_agent_admin_id = e.id
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  .inp {
    flex: 1;
    overflow: hidden;
    margin-right: 16px;
  }
}
</style>
